<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单控件要写在表单元素中form action提交用户信息的服务器地址 -->
    <form action="test.php" method="post">
        <!-- 明文输入框 -->
        用户名：<input type="text"><br>
        <!-- 暗文输入框 -->
        密码：<input type="password"><br>
        <!-- br强制换行标签 -->
        性别：
        <!-- 点击文字 单选按钮或输入框聚焦 label for属性值和id一致 -->
        <label for="list">
            男：<input type="radio" checked name="gender" value="male" id="list">
        </label>
        <label>女：<input type="radio" name="gender" value="female">
        </label><br>
        <!-- checked可以设置单选按钮和复选框默认选中 -->
        爱好：
        游泳：<input type="checkbox" name="hobbies" value="swiming">
        篮球：<input checked type="checkbox" name="hobbies" value="basketball">
        足球：<input type="checkbox" name="hobbies" value="football"><br>
        城市：
        <select name="city">
            <!-- 对下拉选项进行分组 -->
             <optgroup label="一线城市">
             <option value="lanzhou">兰州</option>
            <option value="baiyin">白银</option>
            <option value="tianshui" selected>天水</option>
             </optgroup>
             <!-- disabled禁用 -->
             <optgroup label="二线城市" disabled>
            <option value="beijing">北京</option>
            <option value="shanghai">上海</option>
            <option value="guanfzhou">广州</option>
             </optgroup>
        </select><br>
        描述：<textarea name="des" cols="30" rows="10"></textarea><br>
        生日：<input type="datetime-local" >
        日期：<input type="date" ><br>
        文件上传：<input type="file"><br>
        滑块：<input type="range" max="100" min="0" step="10"><br>
        颜色取色器：<input type="color">
        进度条：<progress min="0" max="100" value="70"></progress>
        <!-- 表单提交按钮 -->
         <input type="submit" value="提交">
    </form>
</body>

</html>